<template>
    <div class="header">
        <div class="logo_wrap">
            <img class="logo" src="../assets/images/header/title_bg.jpg">
            <img class="light_line" src="../assets/images/header/title_bg2.png" alt="">
            <input v-model="title" type="text" @blur="updateSysTitle">
        </div>
        <div class="header_menu">
            <div class="header_menu_item menu_1" @click="changeMode('car')">
                <img v-if="store.mode == 'car'" class="image" src="../assets/images/header/menu_car1.png">
                <img v-else class="image" src="../assets/images/header/menu_car.png">
            </div>
            <div class="header_menu_item menu_2" @click="changeMode('fire')">
                <img v-if="store.mode == 'fire'" class="image" src="../assets/images/header/menu_fire1.png">
                <img v-else class="image" src="../assets/images/header/menu_fire.png">
            </div>
            <div class="header_menu_item menu_3" @click="changeMode('water')">
                <img v-if="store.mode == 'water'" class="image" src="../assets/images/header/menu_flood1.png">
                <img v-else class="image" src="../assets/images/header/menu_flood.png">
            </div>
            <div class="header_menu_item menu_4" @click="changeMode('cogn')">
                <img v-if="store.mode == 'cogn'" class="image" src="../assets/images/header/menu_cogn1.png">
                <img v-else class="image" src="../assets/images/header/menu_cogn.png">
            </div>
        </div>
        <div>
            <div class="mode_time">
                <div class="mode_time_wrap" @click="openModeTimePanel">
                    <img class="mode_time_img" src="../assets/images/time/ic_time_selected.png">
                    <span class="mode_time_label">场景时间</span>
                </div>
                <div v-if="showModeTimePanel" class="time_panel" ref="target">
                    <div class="sync_wrap">
                        <span class="time_label">时间与现实同步</span>
                        <div @click="syncModeTime">
                            <img v-if="syncTimeStatus" class="sync_img"
                                src="../assets/images/time/ic_synchronous_selected.png">
                            <img v-else class="sync_img" src="../assets/images/time/ic_synchronous_normal.png">
                        </div>
                    </div>
                    <div class="time_item_wrap">
                        <div class="tiem_item" @click="setModeTime('0600')">
                            <img v-if="modeTime == '0600'" class="time_img"
                                src="../assets/images/time/ic_morning_selected.png">
                            <img v-else class="time_img" src="../assets/images/time/ic_morning_normal.png">
                            <span class="time_label">早晨</span>
                        </div>
                        <div class="tiem_item" @click="setModeTime('1200')">
                            <img v-if="modeTime == '1200'" class="time_img"
                                src="../assets/images/time/ic_noon_selected.png">
                            <img v-else class="time_img" src="../assets/images/time/ic_noon_normal.png">
                            <span class="time_label">中午</span>
                        </div>
                        <div class="tiem_item" @click="setModeTime('1500')">
                            <img v-if="modeTime == '1500'" class="time_img"
                                src="../assets/images/time/ic_afternoon_selected.png">
                            <img v-else class="time_img" src="../assets/images/time/ic_afternoon_normal.png">
                            <span class="time_label">下午</span>
                        </div>
                        <div class="tiem_item" @click="setModeTime('2000')">
                            <img v-if="modeTime == '2000'" class="time_img"
                                src="../assets/images/time/ic_night_selected.png">
                            <img v-else class="time_img" src="../assets/images/time/ic_night_normal.png">
                            <span class="time_label">夜晚</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="header_right">
            <div class="header_time">
                <span>{{ currentTime }}</span>
                <span>{{ week }}</span>
                <div>{{ day }}</div>
            </div>
            <div class="setting_box">
                <!-- <img class="setting_icon" src="../assets/images/header/icon1.png">
                <img class="setting_icon" src="../assets/images/header/icon3.png"> -->
                <img class="setting_icon" src="../assets/images/header/icon2.png" @click="handleSetting">
            </div>
            <div class="right_logo">
                <img class="logo_img" src="../assets/images/header/header_right.png">
            </div>
        </div>
    </div>
    <SettingDialog ref="settingDialogRef"></SettingDialog>
</template>
<script setup>
import { ref, getCurrentInstance, onBeforeUnmount, onMounted, nextTick, watch } from 'vue';
import { onClickOutside } from "@vueuse/core";
import { useRoute } from 'vue-router';
import { useStore } from '@/stores';
import { getTitle, updateTitle } from '@/api/car';

const { proxy } = getCurrentInstance();
const store = useStore();
const route = useRoute();
const bus = proxy.$bus;
const dayjs = proxy.$dayjs;
const title = ref('未来社区治理云平台');

const settingDialogRef = ref();
const modeTime = ref('0600');
const showModeTimePanel = ref(false);
const target = ref();
const syncTimeStatus = ref(false);

const currentTime = ref("");
const week = proxy.$dayjs(new Date()).format("dddd");
const day = proxy.$dayjs(new Date()).format("YYYY.MM.DD");
let task = null;
onMounted(() => {
    // bus.on("envTime", time => {

    // });
    getSysTitle();
});
// 在组件范围之外的点击事件
onClickOutside(target, () => {
    // 在组件范围之外点击，关闭显示下拉框
    showModeTimePanel.value = false;
})
/**
 * 获取系统标题
 */
const getSysTitle = async () => {
    document.title = title.value;
    let res = await getTitle();
    if (res) {
        title.value = res;
    }
}
/**
 * 更新系统标题
 */
const updateSysTitle = async () => {
    let res = await updateTitle(title.value);
    if (res) {
        proxy.$toast("修改成功");
        document.title = title.value;
    }
}

const changeMode = (mode) => {
    bus.emit('setSimulationMode', mode);
    store.setMode(mode);
    if (mode != 'car') {
        store.setShowSidebar(false)
    } else {
        store.setShowSidebar(true)
    }
}
const handleSetting = () => {
    settingDialogRef.value.open();
}
/**
 * 打开场景时间设置面板
 */
function openModeTimePanel() {
    bus.emit("getTime");
    showModeTimePanel.value = true;
}
/**
 * 开启|关闭 同步时间
 */
function syncModeTime() {
    syncTimeStatus.value = !syncTimeStatus.value;
    if (syncTimeStatus.value) {
        let time = dayjs().format('HHmm')
        bus.emit("changeTime", time);
    }
}
/**
 * 设置场景时间
 * @param time 
 */
function setModeTime(time) {
    modeTime.value = time;
    bus.emit("changeTime", time);
}
</script>
<style scoped lang="scss">
$tx: -86px;

.header {
    width: 100%;
    height: 5.32%; //5.32%
    position: absolute;
    top: 0;
    left: 0;
    opacity: 1;
    // background: #0B1A2F;
    background-image: url("../assets/images/header/header_bg1.jpg");
    background-size: 100% 100%;
    display: flex;
    justify-content: space-between;



    .logo_wrap {
        width: 963px;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: space-between;
        position: relative;

        .light_line {
            width: 963px;
            height: 200%;
            position: absolute;
            top: -5px;
            left: -60px;
        }

        .logo {
            width: 963px;
            height: 100%;
            position: absolute;
            left: -120px;
        }

        input {
            // width: 963px;
            position: absolute;
            left: 0;
            top: 50%;
            transform: translateY(-50%);
            background-color: transparent;
            border: none;
            font-family: 'YouSheBiaoTiHei';
            color: #EDFFFB;
            font-size: 64px;
            text-shadow: 0px 8px 8px rgba(0, 0, 0, 0.3);
            text-align: center;
        }
    }

    .header_menu {
        display: flex;
        flex-direction: row;
        align-items: end;
        flex-shrink: 1;

        .header_menu_item {
            height: 100%;
            cursor: pointer;

            .image {
                width: 100%;
                height: 100%;
            }
        }

        .menu_1 {
            width: 390px;
            // height: 108px;
        }

        .menu_2 {
            width: 464px;
            // height: 108px;
            transform: translate($tx);
        }

        .menu_3 {
            width: 539px;
            // height: 108px;
            transform: translate(calc($tx * 2));
        }

        .menu_4 {
            width: 390px;
            // height: 108px;
            transform: translate(calc($tx * 3));
        }
    }

    .mode_time_wrap {
        display: flex;
        flex-direction: column;
        align-items: center;
        cursor: pointer;
    }

    .mode_time {
        height: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        position: relative;
        margin-right: 60px;

        .mode_time_img {
            width: 32px;
            height: 32px;
        }

        .mode_time_label {
            color: #fff;
            font-size: 28px;
            font-family: "Microsoft YaHei";
            flex-shrink: 0;
            text-wrap: nowrap;
        }

        .time_panel {
            border: 2px solid rgba(21, 185, 151, 0.6);
            position: absolute;
            left: 50%;
            top: 150px;
            transform: translateX(-50%);
            background: rgba(0, 0, 0, 0.5);
            border-radius: 8px;
            padding: 29px 44px;
            opacity: 1;

            .sync_wrap {
                display: flex;
                align-items: center;
                color: #fff;
                margin-bottom: 10px;
                justify-content: center;
            }

            .sync_img {
                width: 50px;
                height: 27px;
                margin-left: 10px;
                cursor: pointer;
            }

            .time_item_wrap {
                display: flex;
                flex-direction: row;
                gap: 50px;
            }

            .tiem_item {
                display: flex;
                flex-direction: column;
                align-items: center;
                justify-content: center;
                flex: 1;
                cursor: pointer;
            }

            .time_img {
                width: 49px;
                height: 54px;
                margin-bottom: 10px;
            }

            .time_label {
                font-size: 28px;
                font-weight: 350;
                line-height: 26px;
                letter-spacing: 0em;
                color: #FFFFFF;
                flex-shrink: 0;
                text-wrap: nowrap;
                font-family: "Microsoft YaHei";
            }

        }
    }

    .header_right {
        display: flex;
        align-items: center;

        .search {
            width: 340px;
            height: 64px;
            display: flex;
            justify-content: center;
            align-items: center;
            border: 1px solid #3AF9FF;
            background-color: #042829;
            padding: 2px 5px 2px 5px;


            .search_input {
                height: 100%;
                border: none;
                background-color: #042829;
                color: #E5FFF5;
                flex: 1;
                margin-right: 10px;
                font-size: 24px;

                &:focus {
                    outline: none;
                }

                &::placeholder {
                    color: #E5FFF5;
                }
            }

            .search_icon {
                width: 26px;
                height: 26px;
                cursor: pointer;
            }
        }

        .header_tools {
            height: 100%;
            display: flex;
            align-items: center;

            .header_tools_icon {
                width: 44px;
                height: 42px;
                cursor: pointer;
                margin-right: 20px;
                background-color: #96FFF0;
                border: none;
                border-radius: 50%;
            }

            .tools_icon_bg {

                width: 44px;
                height: 42px;
                cursor: pointer;
                margin-right: 20px;
                background-color: #18BEB5;
                border: none;
                border-radius: 50%;

                &.disabled {
                    cursor: not-allowed;
                }
            }

            :deep(.el-tooltip__trigger) {
                font-size: 1.2vw;
            }
        }

        .header_time {
            padding: 0 10px;
            color: #FFFFFF;
            flex-shrink: 0;
            font-size: 20px;
            margin-right: 20px;
        }

        .setting_box {
            display: flex;
            align-items: center;

            .setting_icon {
                width: 44px; //48px
                height: 42px;
                cursor: pointer;
                min-width: 20px;
                min-height: 20px;
                margin-right: 10px;
                flex-shrink: 0;
            }
        }

        .right_logo {
            width: 734px; //734.44px
            height: 100%;
            overflow: hidden;

            .logo_img {
                height: 100%;
            }
        }
    }

}
</style>
<style>
.timeSliderTip {
    font-size: 40px;
    padding: 10px;
}
</style>